<template>
    <div class="userInfo-box" v-if="userInfo">
        <el-form ref="userInfo" :model="userInfo" label-width="120px" label-position="left">
            <div class="inline-box">
                <div class="inline-box-left">
                    <el-form-item label="昵称" prop="nickname">
                        <span class="text">{{userInfo.nickname}}</span>
                    </el-form-item>
                    <div v-if="userInfo.userHideInfo">
                        <el-form-item label="性别">
                            <span class="text">{{userInfo.userHideInfo.sex}}</span>
                        </el-form-item>
                        <el-form-item label="手机号码">
                            <span class="text">{{userInfo.userHideInfo.mobile}}</span>
                        </el-form-item>
                        <el-form-item label="公开邮箱" prop="email">
                            <span class="text">{{userInfo.userHideInfo.email}}</span>
                        </el-form-item>
                        <el-form-item label="兴趣">
                            <span class="text">{{userInfo.userHideInfo.interest}}</span>
                        </el-form-item>
                        <el-form-item label="描述">
                            <span class="text">dada{{userInfo.userHideInfo.description}}</span>
                        </el-form-item>
                    </div>
                    <div v-else class="inline-box-left">
                        <div class="hide">
                            用户选择隐藏自己的信息，您无法查看
                        </div>
                    </div>
                </div>
                <div class="avatar">
                    <img :src="userInfo.avatar" class="face"/>
                </div>
            </div>
            <el-form-item label="其它信息">
                <span class="text attention">关注数量：{{userInfo.userAttentionCount}}</span>
                <span class="text fans">粉丝数量：{{userInfo.fansCount}}</span>
            </el-form-item>
            <el-form-item label-width="0">
                <el-button v-if="!attentionUser(userInfo.id)" type="success" @click="attention">关注
                </el-button>
                <el-button v-else type="danger" @click="removeAttention">取消关注</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        name: 'otherInfo',
        data () {
            return {
                id: '',
                userInfo: null
            }
        },
        mounted () {
            if (this.getUser) {
                this.action(this.currentAttentionUsersAction())
            }
            let paths = this.$route.path.split('/')
            this.id = paths[paths.length - 1]
            this.action(this.getOneUserInfoAction(this.id), data => {
                this.userInfo = data.data
            })
        },
        computed: {
            ...mapGetters({
                getUser: 'user/getUser',
                attentionUser: 'user/attentionUser'
            })
        },
        methods: {
            ...mapActions({
                getOneUserInfoAction: 'user/getOneUserInfo',
                attentionUserAction: 'user/attentionUser',
                removeAttentionUserAction: 'user/removeAttentionUser',
                currentAttentionUsersAction: 'user/currentAttentionUsers'
            }),
            attention () {
                this.action(this.attentionUserAction(this.userInfo.id), data => {
                    this.$message.success('关注成功')
                    this.userInfo.fansCount++
                    this.action(this.currentAttentionUsersAction())
                })
            },
            removeAttention () {
                this.action(this.removeAttentionUserAction(this.userInfo.id), data => {
                    this.$message.success('取消关注成功')
                    this.userInfo.fansCount--
                    this.action(this.currentAttentionUsersAction())
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .userInfo-box {
        margin: 32px;
        padding: 24px;

        .text {
            text-align: left;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .attention {
            color: rgba(255, 103, 51, 0.8);
        }

        .fans {
            color: rgba(102, 69, 255, 0.8);
        }

        .inline-box {
            width: 100%;
            height: 375px;

            .inline-box-left {
                float: left;
                width: 80%;

                .hide {
                    height: 300px;
                    line-height: 300px;
                    font-size: 28px;
                }
            }

            .avatar {
                width: 180px;
                height: 180px;
                float: right;

                .face {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>
